@import "./adaptive.scss";
.ranking-label{
    width: pxToRem(316);
    height:pxToVh(118);
    position: absolute;
    left: pxToRem(55);
    top: pxToVh(57);
    p{
        height: pxToVh(18);
        font-size: pxToRem(13.33);
        color: #ADF6FF;
        letter-spacing: 1px;
        margin-bottom: 2px;
        padding: 0;
        font-weight: bold;
    }
    .ranking-label-Bg{
        height: pxToVh(98);
        background: url(../static/container_bg.png) no-repeat;
        background-size: 100% 100%;
        padding-top: pxToVh(3);
        overflow: hidden;
        table{
            width: pxToRem(316);
            color: #ADF6FF;
            text-align: center;
            .yellow{
                color: #FFB400;
            }
            tr:nth-child(odd){
                background: rgba(0,144,255,0.095);
            }
            // i{
            //     margin-left:pxToRem(-31);
            //     margin-right: pxToRem(6);
            // }
            th{
                font-size: pxToRem(11.67);
                padding: 0;
                
                height: pxToVh(24);
                line-height:pxToVh(24);
                vertical-align: middle;
            }
            td{
                text-align: center;
                font-size: pxToRem(11.67);
                font-weight: bold;
                padding: 0;
                height: pxToVh(24);
                line-height:pxToVh(24);
                vertical-align: middle;
                .ranking-color{
                    color: #18E5C9;
                    font-size: pxToRem(16.67);
                    font-weight: bold;
                }
            }
            .alignLeft{text-align: left;padding-left:pxToRem(20);}
            .percentage{
                font-size: pxToRem(13.33);
                font-weight: bold;
            }
            .iconfont{font-size: pxToRem(16);}
        }
    }
}
.provinces-table{
    width: pxToRem(625.1);
    height: pxToVh(727.04);
    .data-title{
        position: absolute;
        margin: 0;
        padding: 0;
        height: pxToVh(14);
        right: pxToRem(18);
        top: pxToVh(13);
        li{
            margin: 0;
            padding: 0;
            float: left;
            line-height: pxToVh(14);
            margin-left: pxToRem(12);
        }

    }
    i,span{
        display: inline-block;
        vertical-align: middle;
        
    }
    span{
        color: #ADF6FF;
        font-size: pxToRem(10);
    }
    i{
        width: pxToRem(10.33);
        border-radius: 50%;
        height: pxToVh(10.33);
        margin-right: pxToRem(4);

        
    }
    .orange{
        background: #FF7E00;
    }
    .yellow{
        background: #FFD900;
    }
    .blue{
        background: #81deff;
    }
    .ranking-label-Bg{
        height: pxToVh(694.04); 
        background: url(../static/container4bg2.png) no-repeat;
        background-size: 100% 100%;
        table{
            width: 100%;
            table-layout: fixed;
            
            th{
                font-size: pxToRem(13.33);
                padding: 0;
                height:pxToVh(25);
                border-right: 1px solid rgba(74, 174, 255,0.5);
                &:last-child{
                    border: none;
                }
            }
            .head{
                background: rgba(0, 147, 255, 0.32);
            }
            .table-bottom{
                border-top: 1px solid rgba(74, 174, 255,0.5);
                font-weight:500;
                font-size: pxToRem(12.33);
            }
            .left{
                margin-right: pxToRem(15);
            }
            td{
                font-size: pxToRem(12.33);
                padding: 0;
                height: pxToVh(32);
                border-right: 1px solid rgba(74, 174, 255,0.5);
                &:last-child{
                    border: none;
                }
            }
            tbody{
                .odd{
                    background: rgba(0, 147, 255, 0.18);
                }
                i{
                    margin-left: 0;
                }
            }
        }
    }
}
.output-table{
    width: pxToRem(518);
    top: 0;
    left: 0;
    .ranking5{
        background: url(../static/ranking5.png) no-repeat;
        background-size: 100% 100%;
        width: pxToRem(32);
        height: pxToVh(37);
        position: absolute;
        top: pxToVh(10);
        right: 0;
    }
    .ranking10{
        background: url(../static/ranking10.png) no-repeat;
        background-size: 100% 100%;
        width: pxToRem(36);
        height: pxToVh(39);
        position: absolute;
        top: pxToVh(8);
        right: pxToRem(-5);
    }
    table{
        width: 100%;
        table-layout: fixed;
        color: #ADF6FF;
        .yellow{
            color: #FFB400;
        }
        i{
            margin-left:pxToRem(-31);
            margin-right: pxToRem(6);
        }
        th,td{
            font-size: pxToRem(10);
            padding: 0;
            height: pxToVh(21);
            text-align: center;
            // overflow:hidden;
            // text-overflow:ellipsis;
            white-space:nowrap
        }
        th{
            font-weight: 500;
        }
        td{
            font-weight: bold;
        }
        tbody{
            tr:nth-child(odd){
                background: rgba(0,144,255,0.095);
            }
            tr.active{
                background: rgba(24,186,229,0.46);
            }
        }
    }
}
.customer-table{
    width: pxToRem(275);
    height: pxToVh(108);
    position: relative; 
    border: 1px solid rgba(0,215,255,0.29);   
    border-radius: pxToRem(4); 
    float: left;
    left: pxToRem(33);
    top: pxToVh(32);
    .title-bg{
        background: url(../static/tableTitltBg.png) no-repeat;
        background-size: 100% 100%;
        width: pxToRem(44);
        height: pxToVh(44);
        position: absolute;
        top: pxToVh(-22);
        left: pxToRem(-22);
        text-align: center;
        line-height: pxToVh(44);
        .iconfont{
            color: #00D7FF;
            font-size: pxToRem(27);
        }
    }
    table{
        width: 100%;
        table-layout: fixed;
        th,td{
            text-align: center;
            font-size: pxToRem(13.33);
            color:#ADF6FF;
            height: pxToVh(27);
        }
        tr:nth-child(even){
            background:rgba(0,144,255,0.1)
        }
        td{
            font-weight: bold;
        }
        .yellow{
            color: #FFB400;
            font-weight: bold;
        }
    }
}

.drgDatasShow{
    width: pxToRem(250.3);
    height:pxToVh(113.3);
    position: absolute;
    right: pxToRem(80.7);
    top: pxToVh(57);
    p{
        height: pxToVh(18);
        font-size: pxToRem(13.33);
        color: #ADF6FF;
        letter-spacing: 1px;
        margin-bottom: pxToVh(2);
        padding: 0;
        font-weight: bold;
    }
    .drgDatasShowBg{
        height: pxToVh(90.3);
        background: url(../static/container_bg.png) no-repeat;
        background-size: 100% 100%;
        padding-top: pxToVh(3);
        overflow: hidden;
        table{
            width: pxToRem(226);
            height: pxToVh(62.4);
            margin:pxToVh(8) auto;
            color: #ADF6FF;
            text-align: center;
            .yellow{
                color: #FFB400;
            }
            tr:nth-child(odd){
                background: rgba(0,144,255,0.095);
            }
            i{
                margin-right: pxToRem(6);
            }
            td{
                text-align: center;
                font-size: pxToRem(11.67);
                font-weight: bold;
                padding: 0;
                height: pxToVh(20.8);
                line-height:pxToVh(20.8);
                vertical-align: middle;
                .drgText{
                    color: #ADF6FF;
                    font-size: pxToRem(11.7);
                    font-weight: bold;
                }
                .drgValue{ 
                    color: #FFB000;
                    font-size: pxToRem(13.3);
                    font-weight: bold;
                }
            }
            .iconfont{font-size: pxToRem(16);}
        }
    }
}